<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-form :model="ruleForm" :rules="rules" inline label-width="auto" status-icon style="max-width: 920px" class="m-auto pt-8">
        <el-form-item label="发货地址" prop="name">
          <!-- <div style="width: 178px">金工部</div> -->
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="收货地址" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        2号线 东向
        <el-divider />
        <el-form-item label="申请部门" prop="name">
          <div style="width: 178px">金工部</div>
        </el-form-item>
        <el-form-item label="车间" prop="region">
          <div style="width: 178px">1车间</div>
        </el-form-item>
        <el-form-item label="班组" prop="region">
          <div style="width: 178px">2班组</div>
        </el-form-item>
        <br />
        <el-form-item label="申请人" prop="region">
          <div style="width: 178px">张三</div>
        </el-form-item>
        <el-form-item label="电话" prop="region">
          <div style="width: 178px">13688889999</div>
        </el-form-item>
        <br>
        <el-form-item label="发货地址" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="收货地址" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="收货人" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="收货人部门" prop="req">
          <div style="width: 178px">自动带入</div>
        </el-form-item>
        <el-form-item label="收货人电话" prop="req">
          <div style="width: 178px">自动带入</div>
        </el-form-item>
        <el-divider />
        <div class="pb-3 flex items-center">
          <el-form-item label="属性" prop="req" class="flex-1">
            <!-- <div style="width: 178px"> -->
              <el-radio-group v-model="radio3">
                <el-radio-button label="工具" value="1" />
                <el-radio-button label="物料" value="2" />
                <el-radio-button label="设备" value="3" />
                <el-radio-button label="工装" value="4" />
                <el-radio-button label="物料半成品" value="5" />
              </el-radio-group>
            <!-- </div> -->
          </el-form-item>
          <div >
            <el-button icon="CirclePlus" type="primary">加工号</el-button>
            <el-button icon="CirclePlus" type="primary">加产品</el-button>
          </div>
        </div>
        <div v-if="radio3 === '工具'">
        <el-form-item label="物料名称" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="吨位">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="材质">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="数量(件)" prop="req">
          <div style="width: 178px">
            <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
          </div>
        </el-form-item>
        <el-form-item label="数量(铲)" prop="req">
          <div style="width: 178px">
            <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="reqe">
          <el-input
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            v-model="ruleForm.name"
            style="width: 470px"
            placeholder="请输入"
          />
        </el-form-item>
        <el-divider />
</div>
        <div v-else>
        <el-form-item label="产品工号">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="产品名称" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="机号">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <br />
        <el-form-item label="物料名称" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="图号">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="件号" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <br />
        <el-form-item label="数量(件)" prop="req">
          <div style="width: 178px">
            <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
          </div>
        </el-form-item>
        <el-form-item label="数量(铲)" prop="req">
          <div style="width: 178px">
            <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="reqe">
          <el-input
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            v-model="ruleForm.name"
            style="width: 470px"
            placeholder="请输入"
          />
        </el-form-item>
        <el-divider />
      </div>

        <!-- <el-form-item label="车辆类型" prop="req">
          <div style="width: 178px">
            <el-radio-group v-model="radio1">
              <el-radio-button label="物流班车" value="1" />
              <el-radio-button label="物流专车" value="2" />
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="方向" prop="req">
          <div style="width: 178px">
            <el-radio-group v-model="radio2">
              <el-radio-button label="东向" value="1" />
              <el-radio-button label="西向" value="2" />
            </el-radio-group>
          </div>
        </el-form-item>
        <br> -->

        <el-form-item label="质检人">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <br>
        <!-- <el-divider /> -->

        <el-form-item label="上传照片" prop="req">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            style="width: 178px"
          >
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <div class="text-right py-5">
          <el-button>存为草稿</el-button>
          <el-button type="primary">下单</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue"

const ruleForm = reactive({
  name: ""
})
const rules = reactive({
  name: [{ required: true, message: "请输入", trigger: "blur" }]
})
const radio3 = ref("工具")

</script>
<style lang="scss" scoped></style>
<style>
.el-divider--horizontal {
  margin: 0 0 18px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

